<!-- 客服评价设置 -->

<template>
  <div class="Problemsetting-container">
    <el-card class="Problemsetting-container">
      <div class="title">
        <div class="icon"></div>
        <span>基础信息</span>
        <div class="is-"></div>
      </div>
      <div class="text">
        <el-form
          class="form"
          ref="form"
          :model="form"
          label-position="top"
          label-width="80px"
        >
          <el-form-item label="自动发送">
            <el-switch v-model="isOpen"></el-switch>
          </el-form-item>
          <span v-if="form.delivery"
            >开启后，客户可在会话结束时对服务做出评价哦</span
          >
          <el-form-item label="邀请评价文案">
            <el-input
              placeholder="请输入"
              v-model="form.inviteContent"
            ></el-input>
          </el-form-item>
          <el-form-item label="评价后回复文案">
            <el-input
              placeholder="请输入"
              v-model="form.replayContent"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <!-- <el-button @click="empty()">重置</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "EvaluationSettings1",
  mounted() {
    this.getCustomerEvaluateRecordMessage()
  },
  data() {
    // 验证用户名和密码操作
    return {
        isOpen:"",
      form: {},
    };
  },
  watch: {},

  methods: {
    onSubmit() {
      console.log("submit!");
      this.$API.kefu.addCustomerEvaluateRecordMessage({
        customerId: Number(localStorage.getItem("id")),
        inviteContent: this.form.inviteContent,
        isOpen: this.form.isOpen,
        replayContent: this.form.replayContent,
      });
    },
    async getCustomerEvaluateRecordMessage() {
      let res = await this.$API.kefu.getCustomerEvaluateRecordMessage(
    Number(localStorage.getItem("id")),
      );
      console.log(res.data, "获取评价设置");
      if (res.code == 200) {
        this.isOpen = res.data.isOpen == 1 ? true : false;;
        this.form = res.data;
      }
    },
    empty() {
      this.form = {};
    },
  },
};
</script>
<style scoped>
.Problemsetting-container {
  margin: 10px;

  .title {
    display: flex;
    align-items: center;
    height: 60px;

    span {
      color: #3d3d3d;
      font-weight: 400;
      /* font-size: Source Han Sans-Regular; */
    }

    .icon {
      width: 5px;
      margin-right: 4px;
      height: 16px;
      background: #2561ef;
      border-radius: 172px 172px 172px 172px;
    }

    .is- {
      width: 396px;
      height: 1px;
      background-color: #d8d8d8;
    }
  }

  .form {
    margin-left: 80px;
    width: 600px;
  }
}
</style>